<template>
	<table class="table table-bordered table-striped" v-el:table>
	</table>
	<create-modal v-ref:modal></create-modal>
	<photo-container v-ref:photo>
		<img :src="currentImg" alt="">
	</photo-container>
</template>
<script>
	import Control from './keyword.control.vue';
	import Modal from 'pages/partial/graphic.read.vue';	
	
	let datatable;
	export default {
		data: () => ({
			dataSet: {
				data: [],
				recordsTotal: 0,
				recordsFiltered: 0
			},
			columnsSet: [],
			currentImg: ""
		}),
		components: {
			'create-modal': Modal		
		},		
    events: {
      'table-reload': function () {
      	datatable.api().ajax.reload();
			}
    }, 		
		methods: {
			  reset() {
					//this.$els.searchform.reset();
					datatable.api().ajax.reload();
				},
				search() {
					datatable.api().ajax.reload();
				},
				setConfig() {
					//..加载配置
						this.columnsSet = [
//						{
//								title: "规则名",
//								data: "title",
//								className: "first-td"
//						},
						{
								title: "关键词",
								data: "keywords"
						},
//						{
//								title: "消息种类",
//								data: "keywordType"						
//						},								
						{
								title: "消息种类",
								data: "msgType",
				  			render: function(data) {
									if(data == 'text') {
										return '文本'
									} else if(data == 'image') {
										return '图片'
									} else {
										return '图文'
									}
								}								
						},
						{
								title: "相关操作",
								name: "edit",
								className: "edit",
								data: null,
								defaultContent: ""
						}							
					];
				},
				loadData(data = {}) {
									
					//..加载数据
					let self = this;
		
					return new Promise(function (resolve, reject) {
						data.mchtIdFlag = localStorage.getItem('get_id')
						data.subcribe =3;
						self.$search({
							url: '/api/v1' + projectName_Url + '/wechat/respMsg/query.html',
							data
						}).then( response => {	
							if (response) {
								let content = response.content;
								self.dataSet.data = content.respMsgList;
								self.dataSet.recordsTotal = content.total;
								self.dataSet.recordsFiltered = content.total;
								return resolve();
							}
						}, response => {
							  return reject();
						});

					})
				}
		},
		created() {
			this.setConfig();
		},
		ready() {
			let self = this;

			datatable = $(this.$els.table).dataTable({
				"columns": self.columnsSet,
				"paging": true,
				"pagingType": "full_numbers",
				"lengthChange": false,
				"searching": false,
				"ordering": false,
				"info": true,
				"autoWidth": false,
				"serverSide": true,
				"processing": true,
				"fnCreatedRow": function (row, data, index) {
					let dom = this.api().cell(row, 'edit:name').node();
					let editView = new Vue(Control);
					//editView.model = data;
					data.mid = data.id.respMsgId;
					data.mchtId = data.id.mchtId;
					//editView.$set("title",data.title);
				  editView.$set("id",data.mid);
					editView.$set("mchtId",data.mchtId);
					editView.$set("keywords",data.keywords)
					editView.$set("model",data);
					
					delete data.id;
					editView.$on("open", function (item) {
//						self.model = _.cloneDeep(data);
//						self.$refs.modal.init();						
							if(item.msgType == "news") {
							let data = {
								artId: item.articleIds
							};
							//media								
							let id = item.id;	
							self.$post({
								url: '/api/v1' + projectName_Url + '/wechat/media/querydef.html',
								data
							}).then(response=>{
								//获得图文信息
								let arr = response.content;
								if(!arr) {
									let message = {
										title:"温馨提示",
										content:"当前图文已不存在"
									}
									Midway.alert(message);
									return false;
								} 
								let picIdArr = [];
								let picUrlArr = [];
								arr.forEach(json =>{
									if(json.picUrl.trim() == '') {
										json.show_cover_pic = 0;
									} else {
										json.show_cover_pic = 1;
									}
									picUrlArr.push(json.picUrl);
									json.content_source_url = json.picUrl;
									delete json.picUrl;

									picIdArr.push(json.localPicId);
									delete json.localPicId;

									json.thumb_media_id = json.thumbMediaId;
									delete json.thumbMediaId;

									delete json.id;
									delete json.description;
									delete json.url;
								})
								self.$refs.modal.editInit(arr,id,picIdArr,picUrlArr);

							},response=>{

							});														
						} else if(item.msgType == "image") {
							//图片
							self.$set("currentImg",item.url);
							self.$nextTick(()=>{
								self.$refs.photo.init();
							})							
						}	else {
							//文字
							let message = {
								title: "文本内容",
								content: item.content
							}
							Midway.alert(message);
						}					
					});
					
					editView.$on("reload", function () {
						self.reset();
					});
					
					editView.$mount().$appendTo(dom);
				},				
				"ajax": function (data, callback, settings) {

					let result = {};
					let _data = {};

					_data.aoData = JSON.stringify([{
						"name": "iDisplayStart",
						"value": 1 + data.start / data.length
									}, {
						"name": "iDisplayLength",
						"value": data.length
									}]);
					
					self.loadData(_data).then(function () {
						result = self.dataSet;
						if (!result.data) {
							result.data = [];
						}
						callback(result);
					}, function () {
						result.data = [];
						callback(result);
					})

				}

			});
		}
	}
</script>